<template>
  <div style="height: 100%;">
    <div class="forgot-view" v-if="!showCode">
      <h4 class="forgot-title">{{ $t('login.forgot') }}</h4>
      <div class="forgot-format">
        <div class="email">
          <el-input :placeholder="$t('form.emailPlaceholder') " v-model="form.email"  @blur="emailRule">
            <template slot="prepend" >{{ $t('form.newEmail') }}</template>
          </el-input>
        </div>
        <div class="email input-margin">
          <el-input :placeholder="$t('form.pwdPlaceholder')" v-model="form.pwd" :type="passwordVisible1? 'text': 'password'" @blur="pwdRule">
            <template slot="prepend" >
              <div>{{ $t('form.newPwd') }}</div>
              <svg-icon :iconClass="passwordVisible1?'eye':'eye-close'"  @click.native="handlePasswordVisible1" class="eye"/>
            </template>
          </el-input>
        </div>
        <div class="email input-margin">
          <el-input :placeholder="$t('form.pwd2Placeholder')" v-model="form.pwd2" :type="passwordVisible2? 'text': 'password'" @blur="pwd2Rule">
            <template slot="prepend" >
              <div>{{ $t('form.newPwd2') }}</div>
              <svg-icon :iconClass="passwordVisible2?'eye':'eye-close'"  @click.native="handlePasswordVisible2" class="eye"/>
            </template>
          </el-input>
        </div>
      </div>
      <div class="reset-button">
        <el-button type="primary" class="reset" @click="getCode()" :loading="loading">{{ $t('login.reset') }}</el-button>
      </div>
      <div class="center">
        <div class="jump-log" @click="backLogin">{{ $t('login.jump') }}</div>
      </div>
    </div>
    <Code v-if="showCode" :email="form.email" :password="form.pwd" :type="type" ref="code"  @getType="getType" @codeToLogin="backLogin" @getCode="getCode"/>
  </div>
</template>
<script>
import { sendSms } from '@/api/login'
import { mapGetters } from 'vuex'
import mixins from './mixins'
import Code from './com/code-input/code'
export default {
  name: 'Forgot',
  mixins: [mixins],
  components: { Code },
  data () {
    return {
      passwordVisible1: false,
      passwordVisible2: false,
      showCode: false,
      loading: false,
      type: 'forgot',
      emailRight: false,
      pwdRight: false,
      pwd2Right: false,
      form: {
        email: '',
        pwd: '',
        pwd2: '',
        code: ''
      }

    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    rules () {
      return this.emailRight && this.pwdRight && this.pwd2Right
    }
  },
  methods: {
    // codeToLogin () {
    //   this.$emit('codeToLogin')
    // },
    getType () {
      this.showCode = false
    },
    emailRule () {
      this.emailRight = this.emailRules(this.form.email)
    },
    pwdRule () {
      this.pwdRight = this.pwdRules(this.form.pwd, this.form.pwd2, true)
    },
    pwd2Rule () {
      this.pwd2Right = this.pwd2Rules(this.form.pwd, this.form.pwd2)
    },
    backLogin () {
      this.$PsMessage.closeAll()
      this.$emit('showLogin')
    },
    handlePasswordVisible1 () {
      this.passwordVisible1 = !this.passwordVisible1
    },
    handlePasswordVisible2 () {
      this.passwordVisible2 = !this.passwordVisible2
    },
    getCode () {
      if (this.rules) {
        this.loading = true
        const params = {
          'eMail': this.form.email,
          'type': 'mail',
          'usedTo': 'update',
          'project': process.env.VUE_APP_PROJECTID
        }
        sendSms(params, { offset: 169 }).then((res = {}) => {
          const data = res.data || {}
          this.loading = false
          this.$PsMessage({ message: data.MSG })
          if (!data.Existed || data.IsOverCount || !data.Verify) {
            return
          }
          this.showCode = true
          this.$nextTick(function () {
            this.$refs.code.timeChange(data.Expire || 600)
          })
          this.form.codeID = data.ID
        }).catch(() => {
          this.loading = false
        })
      } else if (!this.emailRight) {
        this.emailRule()
      } else if (!this.pwdRight) {
        this.pwdRule()
      } else if (!this.pwd2Right) {
        this.pwd2Rule()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.forgot-view{
  padding: 90px 62px 79px;
  width: 100%;
  height: 100%;
  .forgot-title{
    margin-bottom: 20px;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #FFF;
  }
  .forgot-format{
    .input-margin{
        margin-top: 10px;
      }
    .email{
    width: 100%;
    height: 56px;
    background: rgba(0,187,215,0.05);
    border-radius: 6px;
    border: 1px solid var(--color-primary-2);
    &:hover{
      border-color: var(--color-primary-1);
    }
      .el-input-group--prepend{
        display: flex;
        flex-wrap: wrap;
        /deep/ .el-input-group__prepend{
          display: flex;
          justify-content: space-between;
          padding: 6px 10px 0;
          width: 100%;
          height: 16px;
          background-color:transparent;
          font-size: 12px;
          font-weight: 400;
          color: #FFF;
          border: none;
          .eye{
            width: 16px;
            height: 16px;
            &:hover{
              color: var(--color-primary-1);
              cursor: pointer;
            }
          }
        }
        /deep/ .el-input__inner{
          padding: 0 10px;
          height: 38px;
          background:transparent;
          font-size: 12px;
          font-weight: bold;
          color: #FFF;
          border: none;
          &::placeholder{
            color:rgba(255, 255, 255, .3);
            font-weight: 400;
          }
        }
      }
    }
  }
  .reset-button{
    margin:40px 0 12px;
    text-align: center;
    .reset{
      width: 240px;
      height: 40px;
      font-size: 14px;
      font-weight: bold;
      color: #FFF;
      border-radius: 5px;
      border:none;
      background-color: var(--color-primary);
      &:hover{
        background-color: var(--color-primary-0);
      }
    }
  }
  .center{
    display: flex;
    justify-content: center;
  }
  .jump-log{
    height: 17px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
    &:hover{
      color: var(--color-primary-1);
      cursor: pointer;
      border-bottom-color: var(--color-primary-1);
    }
  }
}
</style>
